<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	session.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>服务员点餐</title>
<script type="text/javascript" src="${basePath }js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="${basePath }js/bootstrap.min.js"></script>
<link rel="stylesheet" href="${basePath }css/bootstrap.min.css">
<style>
.divcss5{ 
	border-left:1px solid #00F
	} 
</style>
</head>
<body style="position:relative;">
<!-- 上部 -->
<div class="row">
	<div style="float:left;height:60px;background-color: black" class="col-md-4">
		<p style="margin-left: 30px;margin-top: 13px;color: white;font-size: large">
			<img src="${basePath}img/icon.png">
			原地起飞 - 餐厅到店点餐系统</p>
	</div>
	<div style="float:left;background-color:black;height:60px;padding:13px;" class="col-md-4">
		<p style="margin-left: 30px;margin-top: 5px;color: white;font-size: large">
			餐厅管理界面</p>

	</div>
	<div style="float:left;background-color:black;height:60px;padding:5px;" class="col-md-4" >
		<p style="color:white;margin:10px">
			<img class="img-circle" src="${basePath}img/h1.png" style="width:30px;height:30px;object-fit:contain;">
			当前用户：【<a title="点击我即可修改信息" style="color:red;" href="${basePath }user/update.do?userId=${usermessage.userId}">
			${usermessage.userName }</a>】，身份为：${usermessage.roleDO.roleName}
			<a style="float: right;margin-right:5px;color: white" href="${basePath }OrderSys/pages/login.jsp">退出登录</a>
			<a style="float:right;margin-right:10px;color: white" href="${basePath }/OrderSys/pages/WaiterIndex.jsp">回到服务员界面</a>
		</p>
	</div>
</div>
<!-- 下部 -->
<div>
<!-- 	左边 -->
	<div style="float:left;background-color:#F2F2F2;width:15%;height:650px;">
		<p style="font-size: 20px;margin:15px">
		<img src="${basePath }img/res.png" style="width:30px;height:30px;margin:5px;object-fit:contain;">
			服务员点餐功能
		</p>
  		<img src="${basePath }img/fork.png" style="width:30px;height:30px;margin:10px;object-fit:contain;">
  			<a href="${basePath }foodtype/listFoodType.do" style="color:#01A9DB;margin:10px">服务点餐界面</a><br>
  		<img src="${basePath }img/jie.PNG" style="width:30px;height:30px;margin:10px;object-fit:contain;">
  			<a href="${basePath }order/listorder.do" style="color:#01A9DB;margin:10px">餐桌结账</a>
	</div>
<!-- 	中间 -->
	<div style="float:left;background-color:white;width:3%;height:600px;margin:0px"></div>
<!-- 	右边 -->
	<div style="float:left;background-color:white;width:82%;margin:0px">
		<div style="float:left;background-color:#F2F2F2;width:99%;height:35px;padding:10px;border-radius:15px;
			margin-top:15px;">
			<a>首页</a>/
			<a style="color: black">服务员</a>/
			<a style="color:#6F6F6F">服务员点餐界面</a>
		</div>
		<div style="float:left;background-color:white;width:99%;height:15px;padding:10px;"></div>
		<div style="float:left;background-color:#FFCCCC;width:99%;height:35px;padding:10px;border-radius:15px">
			<span style="color:red;">最新公告信息</span>
		</div>
		<div style="float:left;background-color:white;width:99%;height:70px;padding:10px;">
			<table border="1" color="red">
			<tr>
				<img href="#" src="${basePath }img/email.PNG" style="width:30px;height:30px;object-fit:contain">
			</tr>
			</table>
		</div>
	<div style="float:left;background-color:white;width:100%;">
		<div style="float:left;background-color:#FFCCCC;width:99%;height:35px;padding:10px;border-radius:15px">
			<span style="color:red;">菜品清单</span>
		</div>
		<div style="float:left;background-color:white;width:99%;height:auto;">
		<table style="object-fit:contain;margin:10px">
		</table>
			<div style="float:left;background-color:white;width:99%;height:auto;padding:10px">
				<table class="table table-striped table-hover">
					<%! int i = 1; %>
					<c:forEach items="${listFoodType }" var="f">
						<tr>
							<td>
						<div class="thumbnail">
							<img src="${f.foodtypePicturePath }" alt="菜品图片" style="width:240px;height:160px;object-fit:contain;">
							<div class="caption">
								<h3>${f.foodtypeName}</h3>
								<p>￥<big style="color:red">${f.foodtypePrice }</big>元</p>
								<p>${f.foodtypeIntroduction}</p>
								<p>
									<a class="btn btn-default">-</a>
									<input type="text" class="btn btn-default" style="width: 6px" value="1"></input>
									<a class="btn btn-default">+</a>
								</p>
								<button onclick="foodInfoDetail(this)" value="<%=i%>" class="btn btn-success" >详情</button>
								<p><a href="#" class="btn btn-danger" role="button" >加入点餐车</a></p>
							</div>
						</div>
							</td>
						</tr>
					</c:forEach>
				</table>
				<pg:pager items="${total }" url="${basePath }order/browseorder.do"
						  maxIndexPages="3" maxPageItems="2" scope="request">
					<pg:param name="dinnerTableId" value="${dinnerTableId }" />
					<pg:param name="orderMealTime" value="${orderMealTime}" />
					<jsp:include page="../pages/PagerTag.jsp"></jsp:include>
				</pg:pager>
			</div>
		</div>	
	</div>
		<div style="float:left;background-color:white;width:100%;margin-top: 10px">
			<div style="float:left;background-color:#FFCCCC;width:99%;height:35px;padding:10px;border-radius:15px">
				<span style="color:red;">点餐车界面</span>
			</div>
			<table  style="object-fit:contain;margin:10px">
				<thead>
				<tr>
					<th>菜品</th>
					<th >单价</th>
					<th>数量</th>
					<th>金额</th>
					<th>删除</th>
				</tr>
				</thead>
				<tbody id="goods">
				</tbody>
				<tfoot>
				<tr>
					<td colspan="3" align="center" >总计</td>
					<td id="total"></td>
					<td>元</td>
				</tr>
				</tfoot>
			</table>
			<center>
				<a style="margin-top:35px;width:35%" class="btn  btn-danger">确认订单</a>
			</center>
		</div>
<%--弹出悬浮框--%>
		<div class="modal fade" tabindex="-1" role="dialog" id="foodModal" >
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">菜品详情</h4>
					</div>
					<div class="modal-body">
						<div class=".col-md-12">
							<img id="foodInfoImage" class="img-circle" style="width:100px;height:100px;display:block;margin: 0 auto 0;">
						</div>
						<div class="caption" style="margin-left: 100px" id="foodInfoModal">
							<h2>菜品名称：</h2>
							<h2>推荐菜品：</h2>
							<h3>菜品介绍：</h3>
							<h3>菜品描述：</h3>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div>
</div>
</div>
<script>
	window.onload = function(){
		console.log("页面加载");
	}
	function closeModal(){
		var flt = document.getElementById('foodModal');
		flt.style.display = 'none';
	}
	function foodInfoDetail(d){
		console.log("调用点击函数");
		var i=d.value;
		console.log(i);
		var table = document.getElementById("foodInfoTable");
		var rows = table.rows;
		var foodId = rows[i].cells[0].innerHTML;
		var foodName = rows[i].cells[1].innerHTML;
		var foodIsrecommend = rows[i].cells[2].innerHTML;
		var foodIntroduction = rows[i].cells[3].innerHTML;
		var foodDetail = rows[i].cells[4].innerHTML;
		var foodImagePath = rows[i].cells[5].innerHTML;
		document.getElementById("foodInfoModal").innerHTML="<h2>菜品名称："+foodName+"</h2>"+"<h2>推荐菜品："+foodIsrecommend+"</h2>"+"<h3>菜品介绍："+foodIntroduction+"</h3>"+"<h3>菜品描述："+foodDetail+"</h3>";

		var image=document.getElementById("foodInfoImage");
		image.setAttribute("src",foodImagePath);
		jQuery("#foodModal").modal('show');

	}
</script>

<script type="text/javascript">
	//this js中指当前对象
	function add_shoppingcar(btn){
		var tr=btn.parentNode.parentNode;
		var tds=tr.getElementsByTagName("td");
		var name=tds[0].innerHTML;
		var price=tds[1].innerHTML;
		var tbody=document.getElementById("goods");
		var row=tbody.insertRow();//insertRow表格开头插入新行
		row.innerHTML="<td>"+name+"</td>"+
				"<td>"+price+"</td>"+
				"<td align='center'>"+
				"<input type='button' value='-' id='jian'  onclick='change(this,-1)'  />"+
				"<input id='text' type='text' size='1' value='1' readonly='readonly' />"+
				"<input type='button' value='+' id='add'  onclick='change(this,1)'  />"+
				"</td>"+
				"<td>"+price+"</td>"+
				"<td align='center'>"+
				"<input type='button' value='X' onclick='del(this)'/>"+
				"</td>"+
				"</tr>"
		total();
	}
	//增加减少数量，用n正负1来表示点击了加减按钮
	function change(btn,n){
		//获取数量的三个input对象
		var inputs = btn.parentNode.getElementsByTagName("input");
		//获取原来的数量
		var amount = parseInt(inputs[1].value);
		//当amount=1时不能再点击"-"符号
		//用n<0来表示点击了减button
		if(amount<=1 && n<0){
			return;
		}
		//根据加减来改变数量
		inputs[1].value = amount + n;
		//将改变后的数量值赋值给amount
		amount = inputs[1].value;
		//获取表格中的行
		var tr = btn.parentNode.parentNode;
		//获取所有的列
		var tds = tr.getElementsByTagName("td");
		//获取单价
		var price = parseFloat(tds[1].innerHTML);
		//总价=单价*数量
		var m = price * amount;
		//将总价赋值给相应的位置
		tds[3].innerHTML = m;
		//调用total方法，求总计
		total();
	}


	function total(){
		var tbody=document.getElementById("goods");
		var trs=tbody.getElementsByTagName("tr");
		var sum=0;
		for(var i=0;i<trs.length;i++){
			var tds=trs[i].getElementsByTagName("td");
			var m=tds[3].innerHTML;
			sum += parseFloat(m);
		}
		var total=document.getElementById("total");
		total.innerHTML = sum;
	}
	function del(i){
		var tr=i.parentNode.parentNode;
		tr.parentNode.removeChild(tr);
		//tr.remove(tr);
		total();
	}
</script>
</body>

</html>